
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			width: 100%;
			height: 25%;
			}
			ul li{
				width: 25%;
				height: 100%;
				box-sizing:border-box ;
				border: 1px solid black;
				float: left;
			}
			 ul li.black{
			 	background: black;
			 }
			 #time{
			 	text-align:center;
			 	position: fixed;
			 	top: 0;
			 	left: 0;
				line-height: 2em;
			 	background: red;
			 	width: 100%;
			 	font-size: 6vw;
			 	color: black;
			 	background: white;
			 }
	</style>
		<script src="js/jquery-1.7.2.min.js" type="text/javascript">
	</script>
	<script type="text/javascript">
  $(function(){
  	var total=0;
  	var time=0;
  	setInterval(function(){
  		time=time+0.1;
  		$('#time span').html(time.toFixed(1));
  		
  	},100)
  	
  	for (var i=0;i<4;i++) {
//		生成随机数
		var num = Math.floor(Math.random()*4);
//		让i号ul里面的num号li添加class
		$('ul').eq(i).find('li').eq(num).addClass('black');
	}
	$('ul li').live('click',function(){
		var index=$(this).parent().index();
		var c=$(this).attr('class');
		
		
		if(index==3 && c=='black'){
//			删除当前这一行ul
			$(this).parent().remove();
			total++;
			var new_ul='<ul><li ></li><li></li><li></li><li></li></ul>'
	    $('body').prepend(new_ul);
	    var num = Math.floor(Math.random()*4);
	    $('ul').first().find('li').eq(num).addClass('black');
//			判断是否已经到40了
          if(total==5){
          	localStorage.t=time.toFixed(1);
          	location.replace('end.html');
          }
			
		}
		
  	
	})
	
  	})

		
	</script>
	<body>
	<ul>
		<li ></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<p id="time"><span >  
		
	</span>秒</p>
		
		
		
	</body>
</html>
